<template>
  <transition name="modal">
    <h1
      v-if="showTitle"
      style="width: 300px; height: 100px; background-color: orange; position: absolute; top: 0; left: 0;"
    >
      你好 Vue 3
    </h1>
  </transition>
  <button @click="toggle">click</button>
  <transition name="fade">
    <h1 v-if="showTitle">你好 Vue 3</h1>
  </transition>
</template>

<script setup>
import { ref } from 'vue';

let showTitle = ref(true);

function toggle() {
  showTitle.value = !showTitle.value;
}
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s linear;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.modal-enter-from {
  opacity: 0;
  transform: translateY(-60px);
}
.modal-enter-active {
  transition: all 0.3s ease;
}
.modal-leave-to {
  opacity: 0;
  transform: translateY(-60px);
}
.modal-leave-active {
  transition: all 0.3s ease;
}
</style>
